<template>
  <!-- 面试技巧搜索 -->
  <div class="search">
    <div class="header">
      <van-nav-bar title="面试技巧搜索" :border="false">
        <template #left>
          <i class="iconfont iconbtn_nav_back icon" @click="$router.go(-1)"></i>
        </template>
      </van-nav-bar>
      <van-search
        v-model="value"
        shape="round"
        placeholder="请输入搜索关键词"
        show-action
        @search="onSearch"
        @cancel="cancel"
      />
    </div>
    <!-- 搜索选项 -->
    <div class="searchItem" v-if="show">
      <div class="theSearch">
        <h3>大家都在搜</h3>
        <ul>
          <li
            class="text"
            v-for="(item, index) in hotList"
            :key="index"
            @click="onSearch(item)"
          >
            {{ item }}
          </li>
        </ul>
      </div>
      <div class="history">
        <h3>历史记录<span class="del" @click="reset">清空</span></h3>
        <ul>
          <li
            class="text"
            v-for="(item, index) in history"
            :key="index"
            @click="toSearch(item)"
          >
            {{ item }}
          </li>
        </ul>
      </div>
    </div>
    <!-- 搜索结果 -->
    <div class="searchResult" v-else>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <technicItem
          v-for="(item, index) in resultList"
          :key="index"
          :item="item"
        ></technicItem>
      </van-list>
    </div>
  </div>
</template>

<script>
import { articlesTechnicTopSearch, articlesTechnic } from '@/api/api.js'
import { getLocal, setLocal, removeLocal } from '@/utils/local.js'
import technicItem from '@/views/technicList/technicItem.vue'
export default {
  components: {
    technicItem
  },
  data () {
    return {
      value: '',
      hotList: [],
      history: JSON.parse(getLocal('technic')) || [],
      show: true,
      resultList: [],
      size: 0,
      loading: false,
      finished: false
    }
  },
  created () {
    this.hotSearch()
  },
  methods: {
    cancel () {
      this.show = true
    },
    // 大家都在搜索
    async hotSearch () {
      const res = await articlesTechnicTopSearch()
      this.hotList = res.data
    },
    // 搜索
    onSearch (val) {
      this.value = val
      if (this.history && this.history.length === 3) {
        this.history.splice(0, 1)
        this.history.push(val)
      } else {
        this.history.push(val)
      }
      setLocal(JSON.stringify(this.history), 'technic')
      this.show = false
    },
    // 历史记录搜索
    toSearch (val) {
      this.value = val
      this.show = false
    },
    // 清空
    reset () {
      this.history = []
      removeLocal('technic')
      this.$router.go(-1)
    },
    async onLoad () {
      // 获取数据列表
      const res = await articlesTechnic({
        start: this.size,
        q: this.value
      })
      this.resultList = [...this.resultList, ...res.data.list]
      this.resultList.map(item => {
        return {
          item: item.title.replace(
            this.value,
            `<span style='color: red'>${this.value}</span>`
          )
        }
      })
      this.loading = false
      if (!res.data.list.length) {
        this.finished = true
      }
      this.size += 5
    }
  }
}
</script>

<style lang="less" scoped>
.search {
  /deep/ .van-nav-bar__left {
    padding: 0;
  }
  .icon {
    font-size: 40px;
  }
  /deep/ .van-search__content {
    background-color: #f7f4f5;
    color: #b8b8b8;
  }
  .header {
    border: 1px solid #eee;
    padding-bottom: 10px;
  }
  .theSearch,
  .history {
    padding: 0 10px;
    h3 {
      font-size: 18px;
      font-weight: 500;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      .text {
        background-color: #eceaea;
        padding: 5px;
        border-radius: 5px;
        font-size: 12px;
        color: #545671;
        margin: 0 10px 10px 0;
      }
    }
    .del {
      float: right;
      font-size: 12px;
      line-height: 22px;
    }
  }
}
</style>
